<template>
    <div class="professor_zyjn">
       <!-- <router-view/>-->
        <div class="layout">
            <div class="table">
                <div>
                    <div><h3>专业技能管理</h3></div>
                     <div>

    <!-- 卡片视图区域 -->
    <el-card style="margin-top: 20px">
        <el-row :gutter="20">
            <!-- 新增按钮 -->
          <el-col :span="8">
              <el-button
                type="success"
                @click="adds()"
				icon="el-icon-circle-plus"
                >新增</el-button>
          </el-col>
        </el-row>
		
		<!-- 动态用户列表 -->
		<el-table :data="tableData" stripe style="width: 100%" border >
		  <el-table-column v-for="column in columns" :key='column.field'
		  	:label="column.title" :prop="column.field" width="120">
		  </el-table-column>
		  <el-table-column fixed="right" label="操作">
		    <template slot-scope="scope">
		      <el-button @click="editShow(scope.row)" type="warning" size="mini">修改</el-button>
		      <el-button @click="del(scope.row)" type="danger" size="mini">删除</el-button>
		    </template>
		  </el-table-column>
		</el-table>
		
		
        <!-- 添加弹出框 -->
        <el-dialog title="新增账号" :visible.sync="el_show" :append-to-body="true">
          <el-form :model="skill">
			<el-form-item label="编号">
			  <el-input
			    placeholder="请输入技能编号"
			    v-model="skill.id"
			    autocomplete="off"
			  ></el-input>
			</el-form-item>   
            <el-form-item label="技能名称">
              <el-input
                placeholder="请输入技能名称"
                v-model="skill.skillName"
                autocomplete="off"
              ></el-input>
            </el-form-item>       
            <el-form-item label="熟练程度">
              <el-select v-model="skill.skillLevel" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                placeholder="请输入备注"
                v-model="skill.remark"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="edit()">编 辑</el-button>
            <el-button @click="err()">取 消</el-button>
          </div>
        </el-dialog>

       
      <!-- 分页 -->
	  <!-- <el-pagination layout="total, sizes, prev, next, pager, jumper"
	  	@size-change="sizeChange"
	  	@current-change="currentChange"
	  	:page-sizes="[2, 5, 10, 50]" :page-size="2" :total="total" >
	  </el-pagination> -->
      
    </el-card>
  </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
import axios from 'axios';
export default {
  data() {
    return {
		options: [{
		          value: 0,
		          label: '了解'
		        },{
		          value: 1,
		          label: '熟悉'
		        },{
		          value: 2,
		          label: '掌握'
		        },{
		          value: 3,
		          label: '精通'
		        }],
				value:"",
		columns:[
			{title:"编号",field:"id"},
			{title:"技能名称",field:"skillName"},
			{title:"技能等级",field:"skillLevel"},
			{title:"备注",field:"remark"}
		],
		tableData:[{id:"1",skillName:"java",skillLevel:"0",remark:"123"},
			{id:"2",skillName:"MSSQL",skillLevel:"1",remark:"456"},
			{id:"3",skillName:"python",skillLevel:"3",remark:"789"}],
			el_show: false,
			resumeid:"102",
			modify:"0",
			skill:{
				id:"",
				skillName:"",
				skillLevel:-1,
				remark:"",
				resumeid:"",
				isdelete:false,	
			}
		}
  },
  mounted() {
  	this.list();
  },
  methods:{
	  list(){
		  axios.get("http://localhost:9001/resume-skill-experience/list",
		  {params:{
			  resumeid:this.resumeid
		  }}).then((response)=>{
			  console.log(response.data);
			  for (var i = 0; i < response.data.length; i++) {
				  if(response.data[i].skillLevel=="0"){
					  response.data[i].skillLevel="了解";
				  }else if(response.data[i].skillLevel=="1"){
					  response.data[i].skillLevel="熟悉";
				  }else if(response.data[i].skillLevel=="2"){
					  response.data[i].skillLevel="掌握";
				  }else if(response.data[i].skillLevel=="3"){
					  response.data[i].skillLevel="精通";
				  }else{
					  response.data[i].skillLevel="";
				  }
				  this.tableData=response.data;
			  }
		  })
	  },
	  adds(){
		  this.modify="0",
		  this.skill.id="",
		  this.skill.skillName="",
		  this.skill.skillLevel=null,
		  this.skill.remark="",
		  this.skill.resumeid=this.resumeid,
		  this.skill.isdelete=false,
	    this.el_show = true
	  },
	  err(){
	    this.el_show = false
	  },
	  edit(){
	  	//新增或修改提交 post
	  	axios.post("http://localhost:9001/resume-skill-experience/edit",
	  	{
	  		id:this.skill.id,
	  		skillName:this.skill.skillName,
	  		skillLevel:this.skill.skillLevel,
	  		remark:this.skill.remark,
	  		modify:this.modify,
	  		resumeid:this.skill.resumeid,
	  		isdelete:this.skill.isdelete
	  	}).then((response)=>{
	  		console.log(response);
	  		//更新列表 
	  		this.list();
	  		this.el_show=false;
	  	});
	  },
	  editShow(v){
	  	console.log(v.id);
	  	axios.get("http://localhost:9001/resume-skill-experience/getById",
	  	{
	  		params:{id:v.id},
	  	}).then((response)=>{
	  		this.skill=response.data;
	  		this.modify=1;
	  		this.el_show=true;
	  	});
	  },
	  del(v){
	  	console.log(v.id);
	  	//是否删除
	  	if(confirm("是否删除?")){
	  		//删除请求 empno
	  		axios.get("http://localhost:9001/resume-skill-experience/del",{
	  			params:{
	  				id:v.id,
	  				},}).then((response)=>{
	  			console.log(response);
	  			//更新列表 
	  			this.list();
	  		})
	  	}
	  }
  }
}
</script>
<style scoped>
    h2,h3{
        width: 150px;
        margin: 20px auto;
    }
    .professor_zyjn{
        width: 100%;
        height: 100%;
    }
    .layout{
        width: 100%;
        height: 100%;
    }
    .table{
        width: calc(100% - 100px);
        margin: 0 50px;
        padding: 0 10px;
        height: 100%;
        border: 1px solid #000;
        background-color: #EFEFEF;
    }
    .one{
        width: calc(100% - 40px);
        height: 50px;
        display: flex;
        margin: 20px;
        align-items: center;
        background-color: #ffffff;
        border: 1px solid #000;
    }
    .one input{
        margin: 0 20px;
    }
    .two{
        width: 100%;
    }
</style>